<!DOCTYPE html><html lang=en><head><meta name=referrer content=never><meta charset=UTF-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><title>Document</title><link rel=stylesheet href=../src/tools/bootstrap-3.3.7-dist/css/bootstrap.min.css><link rel=stylesheet href=../src/css/base.css><link rel=stylesheet href=../src/css/detail.css><style>.num{width:73px;height:73px;font-size:16px;text-align:center;display:block;margin:50px 0 0 0;font-size:20px;color:#000}.jian{position:absolute;top:0;left:82px}.jia{position:absolute;top:38px;left:82px}</style></head><body><h1>我是一个商品详情页面</h1><div class=container></div><script src=../src/tools/jquery.min.js></script><script src=../src/js/myCookie.js></script><script src=../src/js/tools.js></script><script src=../src/js/myAjax.js></script><script src=../src/js/polyfill.js></script><script>//  1, 获取 浏览器地址栏参数数
      const urlValObj = myGetUrlValObj();
      console.log(urlValObj);
      let goods_id = urlValObj.goods_id;

      // 2, 发送请求 根据结果 动态生成页面
      setPage();

      async function setPage() {
        // 发送请求
        const res = await myPromiseJQueryAjax(
          `./server/goods_detail.php`,
          "post",
          { goods_id },
          "json"
        );
        console.log(res);

        // 向 标签中 动态生成页面内容
        let str = `

        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">商品详细信息</h3>
          </div>
          <div class="panel-body">
            <div class="media">
              <div class="media-left">
                <a href="#">
                  <img class="media-object"
                    src="${res.goods_big_logo}"
                    alt="...">
                </a>
              </div>
              <div class="media-body">
                <h4 class="media-heading">${res.goods_name}</h4>
                <p>
                  <i class="glyphicon glyphicon-yen"></i>
                  <span>${res.goods_price}</span>
                </p>
                <div class="btn-group" role="group" aria-label="...">
                  <button type="button" class="btn btn-default">XL</button>
                  <button type="button" class="btn btn-default">L</button>
                  <button type="button" class="btn btn-default">M</button>
                  <button type="button" class="btn btn-default">S</button>
                  <button type="button" class="btn btn-default">XS</button>
                </div>
                <p style="position:relative">
                  <input name="num" value="1" class="num">
                  <button name="-" type="button" class="jian btn btn-default">-</button>
                  <button name="+" type="button" class="jia btn btn-default">+</button>
                </p>
                <p>
                  <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
                  <a href="JavaScript:;"  name="cart" class="btn btn-danger btn-lg" role="button">加入购物车</a>
                </p>
              </div>
            </div>
            <ul class="nav nav-tabs">
              <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
              <li role="presentation"><a href="#">商品参数信息</a></li>
              <li role="presentation"><a href="#">相关商品</a></li>
            </ul>
            <div>
              ${res.goods_introduce}
            </div>
          </div>
        </div>

          `;

        // 内容写入标签对象
        $(".container").html(str);

        $(".container").click(function (event) {
          // event.target 是 js标签对象 不是 jQuery伪数组
          // console.log( event.target );

          if ($(event.target).attr("name") === "-") {
            // input标签中 数值 累减1 最小值是 1
            $('[name="num"]').val(
              Number($('[name="num"]').val()) - 1 < 1
                ? 1
                : Number($('[name="num"]').val()) - 1
            );
          } else if ($(event.target).attr("name") === "+") {
            // input标签中 数值 累加1 最大值是 库存值

            $('[name="num"]').val(
              Number($('[name="num"]').val()) + 1 > res.goods_number
                ? res.goods_number
                : Number($('[name="num"]').val()) + 1
            );
          } else if ($(event.target).attr("name") === "cart") {
            // 获取 cookie

            const cookieObj = myGetCookie();

            // 判断 有没有 login 这个属性对应的属性值
            if (cookieObj.login === undefined) {
              // 没有登录
              if (window.confirm(`您还没有登录,点击确定,跳转登录页面`)) {
                window.location.href = `./login.html?url=${window.location.href}`;
              }
            } else {
              // 1, 判断 输入的购买数量 必须是 1 - 库存
              if (
                !(
                  Number($('[name="num"]').val()) >= 1 &&
                  Number($('[name="num"]').val()) <= res.goods_number
                )
              ) {
                window.alert(
                  `您输入的购买数量超出范围,必须是1-${res.goods_number}`
                );

                // 给 购买数量 赋值一个 合理范围内的数值
                $('[name="num"]').val(1);

                // 通过 return 终止之后程序的执行
                return;
              }

              // 2, 将 当前商品信息 添加到 购物车
              // 使用 本地 localStorage 存储 购物车 数组

              // 当前 还没有 创建 购物车 键值对
              // 也就是 localStorage 调用 购物车键名 结果是 undefined

              if (window.localStorage.cart === undefined) {
                // 添加购物车中当前商品的属性

                // 添加商品的购买数量
                res.num = Number($('[name="num"]').val());

                // 当前添加商品的购买状态 true购买 false不购买 默认是 购买
                res.buy = true;

                // 将 当前 商品的数据对象 以 数组存储 转化为 json字符串  存储到 localStorage 中
                window.localStorage.cart = JSON.stringify([res]);
              } else {
                // 购物车已经存在
                // 也就是 window.localStorage.cart 不是 undefined

                const cart = JSON.parse(window.localStorage.cart);
                console.log(cart);

                // 如果 数组长度是 0 是 一个 空购物车
                if (cart.length === 0) {
                  // 添加 购物车中 当前商品的属性
                  // 当前添加商品的购买数量
                  // res.num = Number($('[name="num"]'), val());

                  // 当前添加商品的购买状态 true购买 false不购买 默认是 购买
                  res.buy = true;

                  // 将 当前 商品的数据对象 以 数组存储 转化为 json字符串  存储到 localStorage 中
                  window.localStorage.cart = JSON.stringify([res]);

                  // 如果 数组长度 不是 0 不是一个 空购物车
                } else {
                  // 方法1: 使用 some() 函数 判断 需要新增的商品 在不在 购物车中
                  // // 判断 当前要加入购物车的商品 是不是 已经存在 购物车
                  // // 当期要加入商品的good_id  和 购物车数组中 商品数据对象的goods_id 是不是相同
                  // let bool = cart.some( item => {
                  //   return item.goods_id === res.goods_id ;
                  // })
                  // 方法2: 通过 循环遍历 判断 购买商品 在不在 购物车中
                  // 定义变量 存储 索引下标
                  let index = 0;
                  // 定义变量 存储 判断结果
                  let bool = false;

                  // 使用 for 循环 遍历 商品购物车数组
                  for (let i = 0; i <= cart.length - 1; i++) {
                    // 如果 购物车 存储商品的goods_id  和 当前添加商品的goods_id 相同

                    if (cart[i].goods_id === res.goods_id) {
                      // 给 变量 赋值 当前购物车商品的索引下标

                      index = i;
                      // 给 变量 赋值 true 表示 当前商品 已经 存在于购物车
                      bool = true;
                      // 终止循环
                      break;
                    }
                  }

                  // 如果 bool 中 存储 true 证明 当前商品 已经存在 购物车商品中
                  // 添加购买数量操作 不能超过 库存数量

                  if (bool) {
                    // 判断 已经购买的数量 + 新增的购买数量 不能 超过 库存数量
                    // 找 数组中 对象存储的 goods_id 和 当前商品 goods_id 相同的 商品对象
                    if (
                      cart[index].num + Number($('[name="num"]').val()) >
                      cart[index].goods_number
                    ) {
                      window.alert(
                        // 弹出提示 信息 购买数量超过库存
                        `您购买数量超过库存,您最多购买${
                          cart[index].goods_number - cart[index].num
                        }`
                      );

                      // 通过 return 终止 之后的程序
                      return;
                    }
                    // 如果 当期添加的购买数量 + 已经购买的数量 没有 超过 库存值
                    // 可以 累加 购买 数量
                    cart[index].num += Number($('[name="num"]').val());

                    // 将 新的数组 转化为 json字符串 存储到 localStorage 中
                    window.localStorage.cart = JSON.stringify(cart);
                  } else {
                    // 当期 加入的商品 没有存在于 购物车中
                    // 当期商品 添加 购买数量 购买信息 添加到数组的首位
                    res.buy = true;
                    res.num = Number($('[name="num"]').val());

                    // 在数组的首位新增
                    cart.unshift(res);

                    // 将 新的数组 转化为 json字符串 存储到 localStorsge 中
                    window.localStorage.cart = JSON.stringify(cart);
                  }
                }
              }
              // 跳转 购物车页面
              window.location.href = "./cart.html";
            }
          }
        });
      }</script><script></script></body></html>